import React from 'react';
import { Grid,List } from 'antd-mobile';
import propsType from 'prop-types';
class AvatarSelector extends React.Component{
	static propsType = {
		selectAvatar:propsType.func.isRequired
	}
	constructor(props) {
	    super(props);
		this.state = {
			text:'',
			icon:''
		}
	}
	render(){
		const avatarList = ['avatar_1','avatar_2','avatar_3','avatar_4']
							.map(v =>({
								icon:require(`../img/${v}.jpg`),
								text:v
							}));
		return (
			<div>
			
				<List renderHeader={() => (this.state.text ? <div><span>已选择：</span><img width={30} src={this.state.icon} alt={this.state.icon} /></div> 
													:"请选择头像")}>
					<Grid 
						data={avatarList}
						onClick={elm =>{
							this.setState(elm);
							this.props.selectAvatar(elm.text);
						}}
					>
					</Grid>
				</List>
			</div>
		)
	}
}

export default AvatarSelector